<template>
    <view class="uni-load-more" @click="onClick">
        <!-- #ifdef APP-NVUE -->
        <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon"
                           :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true"
                           class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <svg width="24" height="24" viewBox="25 25 50 50"
             v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
             :style="{width:iconSize+'px',height:iconSize+'px'}"
             class="uni-load-more__img uni-load-more__img--android-H5">
            <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
        </svg>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE || H5 -->
        <view
                v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
                :style="{width:iconSize+'px',height:iconSize+'px'}"
                class="uni-load-more__img uni-load-more__img--android-MP">
            <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
            <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
            <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
        </view>
        <!-- #endif -->
        <!-- #ifndef APP-NVUE -->
        <view v-else-if="!webviewHide && status === 'loading' && showIcon"
              :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
            <image :src="imgBase64" mode="widthFix"></image>
        </view>
        <!-- #endif -->
        <text v-if="showText" class="uni-load-more__text"
              :style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText
            : contentnomoreText }}
        </text>
    </view>
</template>

<script>
    let platform
    setTimeout(() => {
        platform = uni.getSystemInfoSync().platform
    }, 16)

    import {
        initVueI18n
    } from '@dcloudio/uni-i18n'
    import messages from './i18n/index.js'

    const {
        t
    } = initVueI18n(messages)

    /**
     * LoadMore 加载更多
     * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
     * @tutorial https://ext.dcloud.net.cn/plugin?id=29
     * @property {String} status = [more|loading|noMore] loading 的状态
     *    @value more loading前
     *    @value loading loading中
     *    @value noMore 没有更多了
     * @property {Number} iconSize 指定图标大小
     * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
     * @property {String} iconType = [snow|circle|auto] 指定图标样式
     *    @value snow ios雪花加载样式
     *    @value circle 安卓唤醒加载样式
     *    @value auto 根据平台自动选择加载样式
     * @property {String} color 图标和文字颜色
     * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
     * @event {Function} clickLoadMore 点击加载更多时触发
     */
    export default {
        name: 'UniLoadMore',
        emits: ['clickLoadMore'],
        props: {
            status: {
                // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
                type: String,
                default: 'more'
            },
            showIcon: {
                type: Boolean,
                default: true
            },
            iconType: {
                type: String,
                default: 'auto'
            },
            iconSize: {
                type: Number,
                default: 24
            },
            color: {
                type: String,
                default: '#777777'
            },
            contentText: {
                type: Object,
                default() {
                    return {
                        contentdown: '',
                        contentrefresh: '',
                        contentnomore: ''
                    }
                }
            },
            showText: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                webviewHide: false,
                platform: platform,
                imgBase64: ''
            }
        },
        computed: {
            iconSnowWidth() {
                return (Math.floor(this.iconSize / 24) || 1) * 2
            },
            contentdownText() {
                return this.contentText.contentdown || t("uni-load-more.contentdown")
            },
            contentrefreshText() {
                return this.contentText.contentrefresh || t("uni-load-more.contentrefresh")
            },
            contentnomoreText() {
                return this.contentText.contentnomore || t("uni-load-more.contentnomore")
            }
        },
        mounted() {
            // #ifdef APP-PLUS
            var pages = getCurrentPages();
            var page = pages[pages.length - 1];
            var currentWebview = page.$getAppWebview();
            currentWebview.addEventListener('hide', () => {
                this.webviewHide = true
            })
            currentWebview.addEventListener('show', () => {
                this.webviewHide = false
            })
            // #endif
        },
        methods: {
            onClick() {
                this.$emit('clickLoadMore', {
                    detail: {
                        status: this.status,
                    }
                })
            }
        }
    }
</script>

<style lang="scss">
    .uni-load-more {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        height: 40px;
        align-items: center;
        justify-content: center;
    }

    .uni-load-more__text {
        font-size: 14px;
        margin-left: 8px;
    }

    .uni-load-more__img {
        width: 24px;
        height: 24px;
        // margin-right: 8px;
    }

    .uni-load-more__img--nvue {
        color: #666666;
    }

    .uni-load-more__img--android,
    .uni-load-more__img--ios {
        width: 24px;
        height: 24px;
        transform: rotate(0deg);
    }

    /* #ifndef APP-NVUE */
    .uni-load-more__img--android {
        animation: loading-ios 1s 0s linear infinite;
    }

    @keyframes loading-android {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .uni-load-more__img--ios-H5 {
        position: relative;
        animation: loading-ios-H5 1s 0s step-end infinite;
    }

    .uni-load-more__img--ios-H5 image {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    @keyframes loading-ios-H5 {
        0% {
            transform: rotate(0deg);
        }

        8% {
            transform: rotate(30deg);
        }

        16% {
            transform: rotate(60deg);
        }

        24% {
            transform: rotate(90deg);
        }

        32% {
            transform: rotate(120deg);
        }

        40% {
            transform: rotate(150deg);
        }

        48% {
            transform: rotate(180deg);
        }

        56% {
            transform: rotate(210deg);
        }

        64% {
            transform: rotate(240deg);
        }

        73% {
            transform: rotate(270deg);
        }

        82% {
            transform: rotate(300deg);
        }

        91% {
            transform: rotate(330deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* #endif */

    /* #ifdef H5 */
    .uni-load-more__img--android-H5 {
        animation: loading-android-H5-rotate 2s linear infinite;
        transform-origin: center center;
    }

    .uni-load-more__img--android-H5 circle {
        display: inline-block;
        animation: loading-android-H5-dash 1.5s ease-in-out infinite;
        stroke: currentColor;
        stroke-linecap: round;
    }

    @keyframes loading-android-H5-rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-android-H5-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40;
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120;
        }
    }

    /* #endif */

    /* #ifndef APP-NVUE || H5 */
    .uni-load-more__img--android-MP {
        position: relative;
        width: 24px;
        height: 24px;
        transform: rotate(0deg);
        animation: loading-ios 1s 0s ease infinite;
    }

    .uni-load-more__img--android-MP .uni-load-more__img-icon {
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: solid 2px transparent;
        border-top: solid 2px #777777;
        transform-origin: center;
    }

    .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
        animation: loading-android-MP-1 1s 0s linear infinite;
    }

    .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
        animation: loading-android-MP-2 1s 0s linear infinite;
    }

    .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
        animation: loading-android-MP-3 1s 0s linear infinite;
    }

    @keyframes loading-android {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-android-MP-1 {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(90deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-android-MP-2 {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-android-MP-3 {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(270deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* #endif */
</style>
